<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <!--引入vue框架-->
   <script src="js/vue.js"></script>
                <!--vue的基础语法-->
</head>
<body>
<h1>vue的基础语法</h1>
<div id="one">
    <h1>双向绑定表单元素</h1>
    <form>
        <!--from表单元素双向绑定-->
        姓名:<input type="text" v-model="username"><br/>
        性别:<input type="radio" value="男" v-model="sex">男
            <input type="radio" value="女" v-model="sex">女<br/>
        爱好:<input type="checkbox" value="上网" v-model="hobby">上网
            <input type="checkbox" value="上车" v-model="hobby">上车
            <input type="checkbox" value="上吊" v-model="hobby">上吊
            <input type="checkbox" value="上厕所" v-model="hobby">上厕所<br/>
        城市:<select name="city" v-model="city">
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
                <option value="广州">广州</option>
                <option value="北京">北京</option>
            </select>
    </form>

    <hr/>
    <h1>单向绑定</h1>
    <!--单向绑定超链接 两种写法-->
    <a :href="url">黄网 简单</a>
    <a v-bind:href="url">黄网 完全</a>

    <hr>
    <h1>绑定事件</h1>
    <!--绑定单击事件  括号都能省略-->
    <button v-on:click="myMethod()">完全写法</button>
    <!--事件命和js语法一样  只是省略写on-->
    <button @click="myMethod()">简单写法</button>

    <hr>
    <h1>判断符合条件才显示</h1>
    <span v-if="score>90">优秀</span>
    <span v-else-if="score>70">良好</span>
    <span v-else>及格</span>
    <br/>
    <span v-show="true">显示</span>
    <span v-show="false">隐藏</span>

    <hr/>
    <h1>v-for循环标签</h1>
    <!--循环固定次数-->
    循环固定次数
    <ul>
        <li v-for="i in 5">{{i}}</li>
    </ul>
    遍历数组
    <ul>
        <!--        数组里面的元素 in 数组-->
        <li v-for="name in arr">{{name}}</li>
        <!--还可以取出索引-->
        <li v-for="(name,index) in arr">{{name}} 索引:{{index}}</li>
    </ul>
    遍历对象数组
    <ul>
        <li v-for="person in persons">{{person.name}}-{{person.age}}-{{person.sex}}</li>
    </ul>
    遍历对象的属性
    <ul>
        <li v-for="(value,key,index) in brand">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>
</body>
</html>
<script>
  /*绑定vue模型*/
  new Vue ({
      el:"#one",
    data:{
          /*属性*/
        username:"杨大炮",
        sex:"男",
        hobby:[],
        city:"广州",
        url:"https://baike.baidu.com/item/%E9%BB%84%E8%89%B2%E7%BD%91%E7%AB%99/389303",
        score:80,
        /*对象*/
        brand:{
            id:1,
            brandName:"三只毛驴",
            companyName:"毛驴公司"
        },
        /*数组*/
        arr:["老王","花裤衩","猪头肉"],
        /*数组对象*/
        persons:[
            {name:"老王",
             age:18,
             sex:"男"},
            {name:"小红",
             age:16,
             sex:"女"}
        ]
    },
    methods:{
        myMethod(){
            alert("我弹出来了!")
        }
    }
  })
</script>